<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>注塑-大屏</title>
    <link rel="stylesheet" href="lib/element/index.css">
    <link rel="stylesheet" href="lib/tailwind/tailwind.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div class="relative" id="app">
    <img class="absolute z-0 body-bg-image" src="images/bg.png" alt="网页整体背景图片"/>

    <img class="absolute z-10 logo-bb-image" src="images/logo.png" alt="logo"/>
    <img class="absolute z-10 shift-name-bg-image" src="images/xbg.png" alt="班组背景图片">
    <img class="absolute z-10 shift-count-bg-image" src="images/xbg.png" alt="上班人数背景图片">

    <span class="absolute z-20 idle-text font-500-20-27-F5AC3E">空闲</span>
    <span class="absolute z-20 producing-text font-500-20-27-79E941">生产中</span>
    <span class="absolute z-20 breakdown-text font-500-20-27-CB3A41">故障</span>
    <img class="absolute z-10 data-bg-image" src="images/data.png" alt="中间数据展示背景图片">

    <img class="absolute z-10 table-one-bg-image" src="images/table_01.png" alt="表格一">
    <span class="absolute z-20 table-one-text font-700-20-27-19ECFF">设备运行</span>
    <img class="absolute z-10 table-one-header-bg-image" src="images/table_header.png" alt="表格头边框一"/>

    <img class="absolute z-10 table-two-bg-image" src="images/table_02.png" alt="表格二">
    <span class="absolute z-20 table-two-text font-700-20-27-19ECFF">设备运行</span>
    <img class="absolute z-10 table-two-header-bg-image" src="images/table_header.png" alt="表格头边框二"/>

    <img class="absolute z-10 table-three-bg-image" src="images/table_03.png" alt="表格三">
    <span class="absolute z-20 table-three-text font-700-20-27-19ECFF">设备运行</span>
    <img class="absolute z-10 table-three-header-bg-image" src="images/table_header.png" alt="表格头边框三"/>

    <span class="absolute z-30 date-week font-500-24-33-68D4FF" v-text="dateWeek"></span>
    <span class="absolute z-30 shift-name font-500-30-41-66FFFF" v-text="shiftName"></span>
    <span class="absolute z-30 shift-count font-500-30-41-66FFFF" v-text="shiftCount"></span>

    <span class="absolute z-30 idle-value font-700-50-69-F5AC3E" v-text="idleValue"></span>
    <span class="absolute z-30 producing-value font-700-50-69-79E941" v-text="producingValue"></span>
    <span class="absolute z-30 breakdown-value font-700-50-69-CB3A41" v-text="breakdownValue"></span>

    <!-- 第一个表格 -->
    <div class="absolute z-30 table-one-div">
        <table class="w-full h-full table-border" v-if="tableOneList.length > 0">
            <tr class="w-full tr-one over-flow-hidden">
                <th class="td-one th-height font-center bg-color-1C07F4">
                    <span class="td-one th-span-height font-400-20-27-FFFFFF">
                        设备号
                    </span>
                </th>
                <th class="td-two th-height font-center bg-color-2D44FA">
                    <span class="td-two th-span-height font-400-20-27-FFFFFF">
                        状态
                    </span>
                </th>
                <th class="td-three th-height font-center bg-color-3589FD">
                    <span class="td-three th-span-height font-400-20-27-FFFFFF">
                        产品名
                    </span>
                </th>
                <th class="td-four th-height font-center bg-color-19AFF7">
                    <span class="td-four th-span-height font-400-20-27-FFFFFF">
                        任务进度
                    </span>
                </th>
                <th class="td-five th-height font-center bg-color-04CCF3">
                    <span class="td-five th-span-height font-400-20-27-FFFFFF">
                        操作人
                    </span>
                </th>
            </tr>
            <tr class="w-full tr-two">
                <td colspan="5"></td>
            </tr>
            <tr class="w-full tr-three" :class="index % 2 === 0 ? 'rgba-5-19-113-05' : 'rgba-5-29-131-08'"
                v-for="(item , index) in tableOneList">
                <td class="td-one tr-three font-center over-flow-hidden">
                    <span class="three-td-one-span font-400-18-25-B5CAF1" v-text="lastNumber(item.eqpCode)"></span>
                </td>
                <td class="td-two tr-three font-center over-flow-hidden">
                    <img class="three-td-two-img" v-if="item.status === '生产中' || item.status === '待上机'"
                         src="images/zsj_01.png" alt="生产中"/>
                    <img class="three-td-two-img" v-else-if="item.status === '空闲中'"
                         src="images/zsj_02.png" alt="空闲中"/>
                    <img class="three-td-two-img" v-else src="images/zsj_03.png" alt="故障中"/>
                </td>
                <td class="td-three tr-three font-center over-flow-hidden">
                    <span class="font-400-18-25-B5CAF1" v-text="item.mtlName"></span>
                </td>
                <td class="td-four tr-three font-left three-td-four over-flow-hidden">
                    <el-progress :text-inside="true" :stroke-width="20"
                                 :percentage="item.process" :format="format"
                                 :status="item.process === 0 ? '' : item.process === 100 ? 'success' : item.process > 80 ? '' : item.process > 60 ? 'warning' : 'exception'"></el-progress>
                </td>
                <td class="td-five tr-three font-center over-flow-hidden">
                    <span class="font-400-18-25-B5CAF1" v-text="item.empName"></span>
                </td>
            </tr>
        </table>
    </div>

    <!-- 第二个表格 -->
    <div class="absolute z-30 table-two-div">
        <table class="w-full h-full table-border" v-if="tableTwoList.length > 0">
            <tr class="w-full tr-one over-flow-hidden">
                <th class="td-one th-height font-center bg-color-1C07F4">
                    <span class="td-one th-span-height font-400-20-27-FFFFFF">
                        设备号
                    </span>
                </th>
                <th class="td-two th-height font-center bg-color-2D44FA">
                    <span class="td-two th-span-height font-400-20-27-FFFFFF">
                        状态
                    </span>
                </th>
                <th class="td-three th-height font-center bg-color-3589FD">
                    <span class="td-three th-span-height font-400-20-27-FFFFFF">
                        产品名
                    </span>
                </th>
                <th class="td-four th-height font-center bg-color-19AFF7">
                    <span class="td-four th-span-height font-400-20-27-FFFFFF">
                        任务进度
                    </span>
                </th>
                <th class="td-five th-height font-center bg-color-04CCF3">
                    <span class="td-five th-span-height font-400-20-27-FFFFFF">
                        操作人
                    </span>
                </th>
            </tr>
            <tr class="w-full tr-two">
                <td colspan="5"></td>
            </tr>
            <tr class="w-full tr-three" :class="index % 2 === 0 ? 'rgba-5-19-113-05' : 'rgba-5-29-131-08'"
                v-for="(item , index) in tableTwoList">
                <td class="td-one tr-three font-center over-flow-hidden">
                    <span class="three-td-one-span font-400-18-25-B5CAF1" v-text="lastNumber(item.eqpCode)"></span>
                </td>
                <td class="td-two tr-three font-center over-flow-hidden">
                    <img class="three-td-two-img" v-if="item.status === '生产中' || item.status === '待上机'"
                         src="images/zsj_01.png" alt="生产中"/>
                    <img class="three-td-two-img" v-else-if="item.status === '空闲中'"
                         src="images/zsj_02.png" alt="空闲中"/>
                    <img class="three-td-two-img" v-else src="images/zsj_03.png" alt="故障中"/>
                </td>
                <td class="td-three tr-three font-center over-flow-hidden">
                    <span class="font-400-18-25-B5CAF1" v-text="item.mtlName"></span>
                </td>
                <td class="td-four tr-three font-left three-td-four over-flow-hidden">
                    <el-progress :text-inside="true" :stroke-width="20"
                                 :percentage="item.process" :format="format"
                                 :status="item.process === 0 ? '' : item.process === 100 ? 'success' : item.process > 80 ? '' : item.process > 60 ? 'warning' : 'exception'"></el-progress>
                </td>
                <td class="td-five tr-three font-center over-flow-hidden">
                    <span class="font-400-18-25-B5CAF1" v-text="item.empName"></span>
                </td>
            </tr>
        </table>
    </div>

    <!-- 第二个表格 -->
    <div class="absolute z-30 table-three-div">
        <table class="w-full h-full table-border" v-if="tableThreeList.length > 0">
            <tr class="w-full tr-one over-flow-hidden">
                <th class="td-one th-height font-center bg-color-1C07F4">
                    <span class="td-one th-span-height font-400-20-27-FFFFFF">
                        设备号
                    </span>
                </th>
                <th class="td-two th-height font-center bg-color-2D44FA">
                    <span class="td-two th-span-height font-400-20-27-FFFFFF">
                        状态
                    </span>
                </th>
                <th class="td-three th-height font-center bg-color-3589FD">
                    <span class="td-three th-span-height font-400-20-27-FFFFFF">
                        产品名
                    </span>
                </th>
                <th class="td-four th-height font-center bg-color-19AFF7">
                    <span class="td-four th-span-height font-400-20-27-FFFFFF">
                        任务进度
                    </span>
                </th>
                <th class="td-five th-height font-center bg-color-04CCF3">
                    <span class="td-five th-span-height font-400-20-27-FFFFFF">
                        操作人
                    </span>
                </th>
            </tr>
            <tr class="w-full tr-two">
                <td colspan="5"></td>
            </tr>
            <tr class="w-full tr-three" :class="index % 2 === 0 ? 'rgba-5-19-113-05' : 'rgba-5-29-131-08'"
                v-for="(item , index) in tableThreeList">
                <td class="td-one tr-three font-center over-flow-hidden">
                    <span class="three-td-one-span font-400-18-25-B5CAF1" v-text="lastNumber(item.eqpCode)"></span>
                </td>
                <td class="td-two tr-three font-center over-flow-hidden">
                    <img class="three-td-two-img" v-if="item.status === '生产中' || item.status === '待上机'"
                         src="images/zsj_01.png" alt="生产中"/>
                    <img class="three-td-two-img" v-else-if="item.status === '空闲中'"
                         src="images/zsj_02.png" alt="空闲中"/>
                    <img class="three-td-two-img" v-else src="images/zsj_03.png" alt="故障中"/>
                </td>
                <td class="td-three tr-three font-center over-flow-hidden">
                    <span class="font-400-18-25-B5CAF1" v-text="item.mtlName"></span>
                </td>
                <td class="td-four tr-three font-left three-td-four over-flow-hidden">
                    <el-progress :text-inside="true" :stroke-width="20"
                                 :percentage="item.process" :format="format"
                                 :status="item.process === 0 ? '' : item.process === 100 ? 'success' : item.process > 80 ? '' : item.process > 60 ? 'warning' : 'exception'"></el-progress>
                </td>
                <td class="td-five tr-three font-center over-flow-hidden">
                    <span class="font-400-18-25-B5CAF1" v-text="item.empName"></span>
                </td>
            </tr>
        </table>
    </div>
</div>

<script src="lib/vue/vue@2.js"></script>
<script src="lib/element/index.js"></script>
<script src="/js/utils.js"></script>
<script src="/js/index.js"></script>
</body>
</html>